<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="lib/element.ui/2.15.8/theme-chalk/index.css">
    <link rel="stylesheet" href="css/start.css">
</head>

<body class="heisir">
    <el-container id="app">
        <el-main class="main">
            <el-tabs v-model="catTabPane" tab-position="left" type="border-card" style="height: 100%;">
                <!-- 下载 -->
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-download"></i> 资源下载</span>
                    <el-tabs type="border-card" v-model="tabPane">
                        <el-tab-pane label="M3U8视频下载">
                            <div class="download-toolbar">
                                <el-button class="mybutton" type="primary" icon="el-icon-news" @click="clickNewTask">新建下载</el-button>
                                <el-button class="mybutton" type="danger" icon="el-icon-news" @click="clickClearTask">清空下载任务( {{allVideos.length}} )</el-button>
                                <span class="speed el-icon-download">{{downloadSpeed}}</span>
                            </div>
                            <ul class="list TaskList" style="overflow:auto">
                                <li v-for="o in allVideos" :key="o.id" :class="{ item: true, selected: selectedItem === o.id }" @click="onItemClick(o)">
                                    <div class="icon"></div>
                                    <div class="info">
                                        <div class="name ellipsis">{{o.taskName}}</div>
                                        <div class="other">
                                            <div class="other-item">{{o.time}}</div>
                                            <div class="other-item link">链接：<input type="text" :value="o.url" readonly></div>
                                        </div>
                                    </div>
                                    <div class="progress">{{o.status}}</div>
                                    <div class="opt">
                                        <div class="top">
                                            <input class="opendir" type="button" value="打开目录" @click="clickItemOptData(o, 'opendir')">
                                        </div>
                                        <div class="bottom">
                                            <input class="play" type="button" value="播放" @click="clickItemOptData(o, 'playvideo')">
                                            <input class="del" type="button" value="删除" @click="clickItemOptData(o, 'delvideo')">
                                            <input class="StartStop" type="button" :value="downloadBtnTextMap[o.statusCode]" :disabled="o.statusCode === DownloadStatus.Stopping" @click="clickItemOptData(o, 'StartOrStop')">
                                        </div>
                                    </div>
                                </li>
                                <el-alert v-if="!allVideos.length"
                                    style="margin-top: 10px; height: 100px; line-height: 1;"
                                    title="您还没有添加下载任务，在浏览器里嗅探到M3U8(HLS协议)视频流后，可以在这里缓存下载，快来试试吧。" type="success"
                                    effect="light" :closable="false" :center="true" show-icon></el-alert>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="M3U8批量下载">
                            <el-form label-width="130px" style="margin-right: 65px;">
                                <el-form-item label="批量视频源" label-position="right">
                                    <el-input type="textarea" :rows="6" placeholder="请输入一行一个M3U8视频源，格式：视频源----任务名（可空）,例如：
        https://host/index1.m3u8----第一个视频
        https://host/index2.m3u8----第二个视频
        https://host/index3.m3u8" v-model="m3u8_urls"></el-input>
                                </el-form-item>
                                <el-form-item label="附加头" label-position="right">
                                    <el-input type="textarea" :rows="4" placeholder="[可空] 请输入一行一个Header，例如：
        Origin: http://www.host.com
        Referer: http://www.host.com" v-model="headers"></el-input>
                                </el-form-item>
                                <el-form-item label="合并完成" label-position="right">
                                    <el-checkbox v-model="taskIsDelTs" label="删除TS片段"></el-checkbox>
                                </el-form-item>
                                <el-form-item>
                                    <el-button class="mybutton" type="primary" @click="clickNewTaskMuti">批量下载
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="合并视频片段">
                            <el-row :gutter="8" style="margin-bottom: 5px;">
                                <el-col :span="2" :offset="1">
                                    <span style="line-height: 40px;float: right;">视频片段</span>
                                </el-col>
                                <el-col :span="20">
                                    <div @drop="dropTSFiles" @dragover.prevent @dragenter.prevent>
                                        <el-input placeholder="选择一个包含TS流的目录或将所有TS文件拖拽至此" v-model="ts_dir"
                                            clearable draggable="false">
                                            <i slot="suffix" class="el-input__icon el-icon-folder-opened"
                                                @click="clickSelectTSDir"></i>
                                        </el-input>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="8" style="margin-bottom: 5px;">
                                <el-col :span="2" :offset="1">
                                    <span style="line-height: 40px;float: right;">合并名称</span>
                                </el-col>
                                <el-col :span="20">
                                    <el-input placeholder="[可空] 默认当前时间戳" v-model="tsTaskName" clearable
                                        draggable="false"></el-input>
                                </el-col>
                            </el-row>
                            <el-row :gutter="8" style="margin-bottom: 5px;">
                                <el-col :span="7" :offset="3">
                                    <div>
                                        <el-radio style="line-height: 40px;" v-model="tsMergeType"
                                            label="speed">快速合并
                                        </el-radio>
                                        <el-radio style="line-height: 40px;" v-model="tsMergeType"
                                            label="transcoding">
                                            修复合并(慢|转码)</el-radio>
                                    </div>
                                </el-col>
                                <el-col :span="6" :offset="1">
                                    <span style="line-height: 40px;">共导入 {{ts_urls.length}} 个视频片段</span>
                                </el-col>
                                <el-col :span="3" :offset="1">
                                    <el-button class="mybutton" type="primary" @click="clickStartMergeTS"
                                        :disabled="ts_urls.length==0">开始合并</el-button>
                                </el-col>
                                <el-col :span="2">
                                    <el-button class="mybutton" type="danger" @click="clickClearMergeTS"
                                        :disabled="ts_urls.length==0">清空</el-button>
                                </el-col>
                            </el-row>

                            <el-row :gutter="8" style="margin-top: 10px;margin-bottom: 5px;"
                                v-if="tsMergeStatus">
                                <el-col :span="2" :offset="1">
                                    <span v-if="tsMergeStatus !='success'"
                                        style="line-height: 100px;float: right;">合并进度</span>
                                    <span v-if="tsMergeStatus =='success'"
                                        style="line-height: 40px;float: right;">查看文件</span>
                                </el-col>
                                <el-col :span="6" v-if="tsMergeStatus !='success'">
                                    <el-progress type="circle" :percentage="tsMergeProgress" status="success"
                                        :width="100"></el-progress>
                                </el-col>
                                <el-col :span="4" v-else>
                                    <el-button class="mybutton" type="success" @click="clickOpenMergeTSDir">
                                        打开文件夹
                                    </el-button>
                                </el-col>
                                <el-col :span="4" v-if="tsMergeMp4Path">
                                    <el-button class="mybutton" type="success" @click="clickPlayMergeMp4">播放视频
                                    </el-button>
                                </el-col>
                            </el-row>

                            <el-row :gutter="8" v-if="tsMergeStatus !='success' && tsMergeStatus">
                                <el-col :span="2" :offset="1">
                                    <span style="line-height: 40px;float: right;">日志</span>
                                </el-col>
                                <el-col :span="20">
                                    <el-input type="textarea" :rows="4" readonly placeholder=""
                                        v-model="tsMergeStatus">
                                    </el-input>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </el-tab-pane>
                <!-- 嗅探 -->
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-view"></i> 资源嗅探</span>
                    <el-container>
                        <el-container class="browser">
                            <el-header class="navigator">
                                <el-autocomplete
                                    class="navigator-url"
                                    type="text"
                                    v-model="navigatorInput"
                                    placeholder="请输入 url"
                                    clearable
                                    :fetch-suggestions="urlSuggestions"
                                    @focus="navigateInputFocus"
                                    @blur="navigateInputBlur"
                                    @input="navigateUrlInput"
                                    @select="clickNaviagte($event.value)"
                                    @keyup.enter.native="clickNaviagte($event.target.value)"
                                    ref="navigateInput"
                                >
                                    <div slot="prepend" class="navigator-btn-list">
                                        <i
                                            class="el-icon-back navigate-btn"
                                            :class="{ disabled: !canGoBack }"
                                            @click="goBack"
                                        ></i>
                                        <i
                                            class="el-icon-right navigate-btn"
                                            :class="{ disabled: !canGoForward }"
                                            @click="goForward"
                                        ></i>
                                        <i
                                            class="el-icon-refresh-right navigate-btn"
                                            @click="refreshVebview"
                                        ></i>
                                    </div>
                                </el-input>
                            </el-header>
                            <el-main class="content">
                                <!-- https://www.electronjs.org/docs/latest/api/webview-tag -->
                                <webview
                                    id="browser"
                                    style="height: 100%;"
                                    :src="navigatorUrl"
                                    allowpopups
                                    enableremotemodule="true"
                                    nodeintegration
                                    webpreferences="allowRunningInsecureContent, contextIsolation=yes"
                                    disablewebsecurity
                                    preload="./sniffPreload/index.js"
                                ></webview>
                            </el-main>
                        </el-container>
                        <el-aside class="videoPanel" width="300px">
                            <ul v-if="browserVideoUrls && browserVideoUrls.length">
                                <li class="videoItem" v-for="item in browserVideoUrls">
                                    <el-row :gutter="10">
                                        <el-col :span="6">{{item.type}}</el-col>
                                        <el-col :span="18"><el-input type="text" readonly :value="item.url"></el-input></el-col>
                                    </el-row>
                                    <el-row :gutter="10">
                                        <el-col :span="6">HEADER</el-col>
                                        <el-col :span="18"><el-input type="text" readonly :value="item.headers"></el-input></el-col>
                                    </el-row>
                                    <el-row v-if="item.key" :gutter="10">
                                        <el-col :span="6">KEY</el-col>
                                        <el-col :span="18"><el-input type="text" readonly :value="item.key"></el-input></el-col>
                                    </el-row>
                                    <el-row :gutter="10">
                                        <el-col :offset="8" :span="8"><el-button size="small" @click="playVideo(item.url, item.headers)">播放</el-button></el-col>
                                        <el-col :span="8"><el-button size="small" @click="sniffNewTask(item)">下载</el-button></el-col>
                                    </el-row>
                                </li>
                            </ul>
                            <el-empty v-else description="暂无资源" />
                        </el-aside>
                    </el-container>
                </el-tab-pane>
                <!-- 设置 -->
                <el-tab-pane label="软件设置">
                    <span slot="label"><i class="el-icon-s-tools"></i> 软件设置</span>
                    <el-form label-width="150px">
                        <el-form-item label="视频存储">
                            <el-input placeholder="请单击右侧按钮选择存储文件夹" v-model="config_save_dir" :readonly="true">
                                <el-button slot="append" class="mybutton" icon="el-icon-folder-opened" @click="clickOpenConfigDir">浏览</el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="HTTP 代理">
                            <el-input placeholder="请输入HTTP代理(如：http://127.0.0.1:7890 )" v-model="config_proxy"
                                @change="proxyChange"></el-input>
                        </el-form-item>
                        <el-form-item label="标题过滤">
                            <el-input placeholder="请输入正则表达式" :value="config_title_filter" @input="onTitleFilterChange" />
                        </el-form-item>
                        <el-form-item label="自定义 URL 匹配">
                            <el-input placeholder="请输入正则表达式" :value="config_custom_url_suffix" @input="onCustomUrlSuffixChange" />
                        </el-form-item>
                        <el-form-item label="建议域名">
                            <el-input placeholder="请输入域名列表，使用英文逗号分隔" :value="config_suggestDomainList" @input="onSuggestDomainListChange" />
                        </el-form-item>
                        <el-form-item label="请求 UA">
                            <el-input :value="config_requestUA" @input="onRequestUAChange" />
                        </el-form-item>
                        <el-form-item label="ts 下载选项">
                            <el-radio-group v-model="config_downloadTsWithHeader" @change="onDownloadTsWithHeaderChange">
                                <el-radio :label="true">携带 header</el-radio>
                                <el-radio :label="false">不携带 header</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="播放器">
                            <el-radio-group v-model="config_player" @change="onPlayerChange">
                                <el-radio label="internal">内置播放器</el-radio>
                                <el-radio label="system">系统播放器</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="目录">
                            <el-button icon="el-icon-view" size="small" @click="clickOpenLogDir">查看日志目录</el-button>
                        </el-form-item>
                    </el-form>
                    <br>
                    <el-divider><i class="el-icon-coffee"></i></el-divider>
                    <el-row :gutter="16">
                        <el-col :span="4" :offset="7">
                            <el-card class="paycode alipay" shadow="always">
                                <img class="image" src="icon/alipay_code.png">
                                <div style="padding: 14px;word-break: keep-all;">
                                    <span>支付宝赞助</span>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="4" :offset="2">
                            <el-card class="paycode wechat" shadow="always">
                                <img class="image" src="icon/wechat_code.png">
                                <div style="padding: 14px;word-break: keep-all;">
                                    <span>微信赞助</span>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row :gutter="8">
                        <el-col :span="12" :offset="6">
                            <el-alert title="开发不易，如果您觉得此款软件对您有帮助，可以请小哥哥喝杯咖啡吗?" type="error" :center="true"
                                :closable="false">
                            </el-alert>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="交流反馈">
                    <span slot="label"><i class="el-icon-chat-dot-square"></i> 交流反馈</span>
                    <el-row :gutter="8">
                        <el-col :span="22">
                            <el-alert title="警示：【天网恢恢疏而不漏】遵纪守法是每位公民应尽的义务，严禁在此发布违规违法内容，否则后果自负！违规内容举报QQ：1586462"
                                type="warning" :center="true" :closable="false" show-icon>
                            </el-alert>
                        </el-col>
                        <el-col :span="2">
                            <el-button class="mybutton" type="success" @click="clickRefreshComment">刷新
                            </el-button>
                            </el-alert>
                        </el-col>
                    </el-row>
                    <section id="comments" class="vcomment"></section>
                </el-tab-pane>
                <el-tab-pane label="我的信息">
                    <span slot="label"><i class="el-icon-s-custom"></i> 我</span>
                </el-tab-pane>
            </el-tabs>

            
            <el-dialog title="新建下载任务" :visible.sync="dlg_newtask_visible" width="60%"
                :modal="true" close-on-click-modal close-on-press-escape
                :center="false"
            >
                <el-form label-width="80px">
                    <el-form-item label="视频源" label-position="right">
                        <div @drop="dropM3U8File" @dragover.prevent @dragenter.prevent>
                            <el-input placeholder="输入在线网络视频源URL，或将M3U8文件拖拽至此" v-model="m3u8_url"
                                draggable="false" @input="m3u8UrlChange">
                                <i slot="prefix" class="el-input__icon el-icon-link"></i>
                                <i slot="suffix" class="el-input__icon el-icon-folder-opened"
                                    @click="clickSelectM3U8"></i>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="playlists.length" label="* 画质" label-position="right">
                        <el-select v-model="playlistUri" placeholder="选择视频源"
                            style="width: 100%;">
                            <el-option v-for="playlist in playlists" :key="playlist.uri"
                                :label="getPlaylistLabel(playlist)" :value="playlist.uri">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务名" label-position="right">
                        <el-input type="text" placeholder="[可空] 默认当前时间戳" v-model="taskName">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="URL前缀" label-position="right"
                        v-if="m3u8_url.startsWith('file:///')">
                        <el-tooltip effect="light" placement="top-start">
                            <div slot="content">
                                如果M3U8文件是从网上直接下载下来的，TS流是在网络上的且M3U8文件里没有URL(http)前缀，就需要填写<br /><br />
                                如果TS视频流在M3U8文件目录下，则不需要填写这块<br /></div>
                            <el-input type="text"
                                placeholder="[可空] M3U8 URL前缀，例如：http://heisir.cn/cdn/123456/"
                                v-model="m3u8_url_prefix"></el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="附加头" label-position="right">
                        <el-input type="textarea" :rows="4" placeholder="[可空] 请输入一行一个Header，例如：
Origin: http://www.host.com
Referer: http://www.host.com" v-model="headers"></el-input>
                    </el-form-item>
                    <el-form-item label="私有KEY" label-position="right">
                        <el-tooltip effect="light" placement="top-start">
                            <div slot="content">
                                32位HEX格式KEY和32位IV值，IV值可空<br />示例：<br />ABABABABABBBBBBBABABABABABBBBBBBABABABABABBBBBBBABABABABABBBBBBB<br />或者：<br />ABABABABABBBBBBBABABABABABBBBBBB<br />
                            </div>
                            <el-input type="text" placeholder="[可空] KEY和IV值(HEX格式)"
                                v-model="myKeyIV">
                            </el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="合并完成" label-position="right">
                        <el-checkbox v-model="taskIsDelTs" label="删除TS片段"></el-checkbox>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-row :gutter="20">
                        <el-col :span="11" :offset="4">
                            <el-alert :title="addTaskMessage" type="error" :closable="false">
                            </el-alert>
                        </el-col>
                        <el-col :span="8" :offset="1">
                            <el-button type="primary" @click="clickNewTaskOK"
                                style="width: 100%;">确 定
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-dialog>
        </el-main>
    </el-container>

    <script src="lib/vue/vue.js"></script>
    <script src="lib/element.ui/2.15.8/index.js"></script>
    <script src="lib/Valine/Valine.min.js"></script>
    <script src="lib/lodash/4.17.21/lodash.js"></script>
    <script src="main.js"></script>

    <script>
        var GUEST_INFO = ['nick', 'mail', 'link'];
        var guest_info = 'nick'.split(',').filter(function (item) {
            return GUEST_INFO.indexOf(item) > -1
        });
        console.log(guest_info)
        var notify = 'false' == true;
        var verify = 'false' == true;
        new Valine({
            el: '.vcomment',
            notify: notify,
            verify: verify,
            appId: "dYhmAWg45dtYACWfTUVR2msp-gzGzoHsz",
            appKey: "SbuBYWY21MPOSVUCTHdVlXnx",
            placeholder: "可以在这里进行咨询交流",
            pageSize: '100',
            avatar: 'mm',
            lang: 'zh-cn',
            meta: guest_info,
            recordIP: true,
            path: '/m3u8-downloader'
        });
    </script>
</body>

</html>